<template>
  <div>
    <!-- 商品分类 -->
    <div class="content-goods-publish">
      <div class="goods-category">
        <ul v-if="categoryListLevel1.length > 0">
          <li
            v-for="(item, index) in categoryListLevel1"
            :class="{ activeClass: category[0].name === item.name }"
            @click="handleSelectCategory(item, index, 1)"
            :key="index"
          >
            <span>{{ item.name }}</span>
            <span>&gt;</span>
          </li>
        </ul>
        <ul v-if="categoryListLevel2.length > 0">
          <li
            v-for="(item, index) in categoryListLevel2"
            :class="{ activeClass: category[1].name === item.name }"
            @click="handleSelectCategory(item, index, 2)"
            :key="index"
          >
            <span>{{ item.name }}</span>
          </li>
        </ul>
      </div>
      <p class="current-goods-category">
        您当前选择的商品类别是：
        <span>{{ category[0].name }}</span>
        <span v-show="category[1].name">> {{ category[1].name }}</span>
      </p>
    </div>
    <!-- 底部按钮 -->
    <div class="footer">
        <el-button type="primary" @click="next">下一步</el-button>
    </div>
  </div>
</template>
<script>
import * as API_GOODS from "@/api/goodsManage.js";
import {ElMessage} from "element-plus";
export default {
  data() {
    return {
      selectGoodsType: false,
      // 商品分类选择数组
      category: [
        { name: "", id: "" },
        { name: "", id: "" },
        { name: "", id: "" },
      ],
      // 商品类型
      goodsType: "",
      /** 1级分类列表*/
      categoryListLevel1: [],
      /** 2级分类列表*/
      categoryListLevel2: [],
      searchParams: {
        saveType: "TEMPLATE",
        sort: "create_time",
        order: "desc",
        pageSize: 10,
        pageNumber: 1,
      },
      templateTotal: 0,
    };
  },
  methods: {
    handleSelectCategory(row, index, level) {
      if (level === 1) {
        this.category.forEach((cate) => {
          (cate.name = ""), (cate.id = "");
        });
        this.category[0].name = row.name;
        this.category[0].id = row.id;
        this.categoryListLevel2 = this.categoryListLevel1[index].secCategoryList;
      } else{
        this.category[1].name = row.name;
        this.category[1].id = row.id;
      }
    },
    /** 查询下一级 商城商品分类*/
    GET_NextLevelCategory(row) {
      const _id = row && row.id !== 0 ? row.id : 0;
      API_GOODS.getCategory().then((res) => {
        if (res.data) {
          this.categoryListLevel1 = res.data;
        }
      });
    },
    // 下一步
    next() {
      window.scrollTo(0, 0);
      if (!this.category[0].name) {
        ElMessage.error("请选择商品分类");
        return;
      } else if (!this.category[1].name) {
        ElMessage.error("必须选择到二级分类");
        return;
      } else if (this.category[1].name) {
        let params = {
          category: this.category,
          goodsType: this.goodsType,
        };
        this.$emit("change", params);
      }
    },
  },
  mounted() {
    this.GET_NextLevelCategory();
  },
};
</script>
<style lang="scss" scoped>
@import "./addGoods.scss";
::v-deep  .ivu-scroll-container {
  height: 450px !important;
}
</style>
